<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios-get</title>
</head>

<body>
    <h2>axios-get</h2>
    <button class="btn1">测试 没有参数</button>
    <button class="btn2">测试 有参数</button>
    <!-- 1. 引入axios库 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        const btn1 = document.querySelector('.btn1')
        const btn2 = document.querySelector('.btn2')

        const api_url = 'http://ajax-api.itheima.net/api/news123'
        const api_2 = 'http://ajax-api.itheima.net/api/area?pname=辽宁省&cname=辽阳市'

        const api_lol = 'https://autumnfish.cn/api/lol/search'

        btn1.addEventListener('click', () => {

            // 2. 调用axios.get()
            axios.get(api_url)
            .then( res => {
                // 成功的
                console.log(res)
            })
            .catch(err => {
                // 如果地址写错了，或者其他一些报错的情况，进入到这里
                console.clear()
                console.log(err)
            })
        })


        // GET方式请求
        // 1. 字符串拼接参数的方式
        // btn2.addEventListener('click', () =>{
        //     // 在哪里去查看前端给后端的参数呢？URL后面，或者载荷payload
        //     // axios.get(`${api_lol}?q=提莫`)
        //     axios.get(`http://ajax-api.itheima.net/api/area?pname=辽宁省&cname=辽阳市`)
        //     // ?key=value&key2=value2
        //     .then(res => {
        //         console.log(res)
        //     })
        // })

        // 用params的形式传递数据
        btn2.addEventListener('click', () => {
            axios.get('http://ajax-api.itheima.net/api/area', {
                params:{  // 这个params不能改，固定
                    pname:'四川省',
                    cname:'成都市'
                }
            })
            .then(res => {
                console.log(res)
            })
        })


        // axios方法get请求 几种方式 ？ 2 种 ， 本质上都是把参数拼接到url地址后面

        // 1. 字符串拼接
        // axios.get(url地址?key=val).then(res => ).catch(err => )

        // 2. 对象的形式
        // axios.get('地址', {
        //     // 实际上params这种方式，也是字符串拼接
        //     params:{
        //         key: val
        //     }
        // }).then(res => {
        //     console.log(res)
        // }).catch(err => {
        //     console.log(err)
        // })
    </script>
</body>
</html>